<template>
	<div class="wrapper">
		<div class="back-icon" @click="goBack()">
			<i class="fa fa-arrow-left"></i>
		</div>
		<header>
			<p>支付成功</p>
		</header>
		<div class="content">
			<div class="icon"><i class="fa fa-check-circle-o"></i></div>
			<div class="text">
				<p>已支付 {{orders.orderTotal}} 元</p>
				<p>积分 + {{parseInt(orders.orderTotal)}}</p>
			</div>
		</div>
		<div class="footer">
			<button @click="goBack()">完成</button>
		</div>
	</div>
</template>

<script>
	import {useRouter} from 'vue-router'
	import {useRoute} from 'vue-router'
	import {ref,onMounted,getCurrentInstance, reactive} from 'vue';
	import Footer from '../components/Footer.vue';
	
	
	export default {
		name: 'Payed',
		setup(){
			const currentInstance = getCurrentInstance();
			const router = useRouter();
			const route = useRoute();
			const orderId = route.params.orderId;
			const orders = ref({});
			const goBack = () => {
				router.push({path:'/'});
			};
			onMounted(() => {
				currentInstance.appContext.config.globalProperties.$axios.post(
						'OrdersController/getOrdersById', currentInstance.appContext.config
						.globalProperties.$qs.stringify({
							orderId: orderId
						}))
					.then(response => {
						orders.value = response.data;
					})
					.catch(error => {
						console.error(error);
					});
				
				//这里的代码是实现：一旦路由到在线支付组件就不能再回到订单确认组件
				//先将当前url路由添加到history对象中
				history.pushState(null, null, document.URL);
				//popstate事件能够监听history对象的变化
				window.onpopstate = () => {
					router.push({
						path: '/index'
					});
				}
			});
			
			return{
				orderId,orders,goBack
			}
		},
		beforeUnmount() {
			window.onpopstate = null;
		}
	}
</script>

<style scoped>
	/*********** 总容器 ***********/
	.wrapper {
		width: 100%;
		height: 100%;
	}
	/*********** 回退按钮 ***********/
	.wrapper .back-icon{
		width: 12vw;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/*********** header部分 ***********/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;
	
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		/* 这行代码保证header位于最顶层，不加这一行会导致商家图片遮挡header，因为默认情况下，绝对位置的元素后写的位于上层 */
	
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wrapper .content{
		width: 100%;
		margin-top: 35vw;
	}
	.wrapper .content .icon{
		height: 30%;
		width: 100%;
		font-size: 18vw;
		color: #38CA73;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wrapper .content .text{
		margin-top: 10vw;
		height: 30%;
		width: 100%;
		
	}
	.wrapper .content .text p:first-child{
		font-size: 5vw;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.wrapper .content .text p:last-child{
		margin-top: 5vw;
		font-size: 3vw;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.wrapper .footer{
		width: 100%;
		border: none;
		outline: none;
		box-sizing: border-box;
		padding: 12vw 0;
	}
	.wrapper .footer button {
		width: 80%;
		height: 10vw;
		font-size: 3.8vw;
		font-weight: 700;
		color: #fff;
		background-color: #38CA73;
		border-radius: 4px;
		border: none;
		outline: none;
	}
</style>